<template>
  <div>
    <el-dialog title="换班申请" :visible.sync="isShow" :close-on-click-modal="false" @close="closeDialog('info')">
      <el-form ref="form" :model="info" :rules="rules">
        <el-form-item>
          用
          <el-date-picker size="small" type="date" placeholder="选择日期" v-model="info.myDate" style="width:200px"
            @change="changeMyDate"></el-date-picker>
          的我的
          <el-select size="small" v-model="info.mySchedule" placeholder="请选择我的班次" style="width:200px">
            <el-option v-for="(item,index) in mySchedules" :key="index" :label="item.ACTIVITYNAME" :value="item.ACTIVITYID">
            </el-option>
          </el-select>
          调换
          <el-date-picker size="small" type="date" placeholder="选择换班日期" v-model="info.otherDate" style="width: 200px"
            @change="changeOtherDate"></el-date-picker>
          的
          <el-select size="small" v-model="info.changeUser" @change="changeOtherUser" placeholder="请选择换班人" style="width:200px">
            <el-option v-for="(item,index) in changeUsers" :key="index" :label="item.AGENTNAME" :value="item.AGENTID">
            </el-option>
          </el-select>
          的班次
          <el-select size="small" v-model="info.otherSchedule" placeholder="请选择换班人班次" style="width: 200px">
            <el-option v-for="(item,index) in others" :key="index" :label="item.ACTIVITYNAME" :value="item.ACTIVITYID">
            </el-option>
          </el-select>
          进行双向调换
        </el-form-item>
        <el-form-item>
          我需要在
          <el-date-picker size="small" type="date" placeholder="选择日期" v-model="info.lastTime" style="width:200px">
          </el-date-picker>
          之前得到答复
        </el-form-item>
        <el-form-item label="协商注释">
          <el-input size="small" type="textarea" v-model="info.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="submit('info')">立即创建</el-button>
        <el-button type="default" size="small" @click="closeDialog('info')">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import request from "@/common/utils/requestWFM";
  import scheduleApplication from '@/message/wfm/userScheduleManage/scheduleApplication/scheduleApplication';
  // import formalClass from '@/message/wfm/userScheduleManage/formalClass/formalClassQuery';
  import UserformalClass from '@/message/wfm/userScheduleManage/formalClass/UserClassQuery';
  import moment from 'moment';
  
  export default {
    props: {
      option: Object
    },
    computed: {
      isShow: {
        get() {
          return this.option.isShow;
        },
        set(value) {
          this.option.isShow = value;
        }
      }
    },
    data() {
      return {
        others: [],
        mySchedules: [],
        info: {
          changUser: '',
          otherDate: '',
          otherSchedule: '',
          myDate: '',
          mySchedule: '',
          remark: '',
          lastTime: ''
        },
        changeUsers: [],
        rules: {
          mySchedule: [{
            required: true,
            message: '请选择',
            trigger: 'change'
          }],
        },
      }
    },
    methods: {
      // 获取换班人当天的班次
      changeOtherUser(){
        this.others = []
        this.info.otherSchedule = ''
        this.getClass(this.info.changeUser,this.info.otherDate).then(value => this.others = value)
      },
      // 提交申请
      async submit() {
        let resBody = new scheduleApplication();
        resBody.data.BRANCHNO = this.option.BRANCHNO;
        resBody.data.AGENTID = this.option.AGENTID;
        resBody.data.CLASSESDATE = moment(this.info.myDate).format('YYYYMMDD');
        resBody.data.CLASSESID = this.info.mySchedule;
        resBody.data.EXCHAGENTID = this.info.changeUser;
        resBody.data.EXCHCLASSESDATE = moment(this.info.otherDate).format('YYYYMMDD');
        resBody.data.EXCHCLASSESID = this.info.otherSchedule;
        resBody.data.LATESTTIME = moment(this.info.lastTime).format('YYYYMMDD');
        if (this.info.remark) {
          resBody.data.NOTE1 = this.info.remark;
        };
        // resBody.data.LATESTTIME = '2019-09-02 12:12:12';        
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.$message({
            type: 'success',
            message: '申请成功'
          })
          this.isShow = false
          this.$emit('ListenChange')
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
        
      },
      async changeOtherDate() {
        this.changeUsers = []
        this.others = []
        this.info.changeUser = ''
        this.info.otherSchedule = ''
        // 选择时间的换班人
        let resBody = new UserformalClass();
         resBody.data.CLASSESDATE = moment(this.info.otherDate).format('YYYYMMDD');
        // resBody.data.AGENTID = agentId;
        resBody.data.BRANCHNO = this.option.BRANCHNO;
        let response = await request(resBody);
        this.changeUsers = response.BODY.AGENTINFO
        this.$forceUpdate();
      },
      async getClass(agentId,date){
        let resBody = new UserformalClass();
        let resData = []
        resBody.data.CLASSESDATE = moment(date).format('YYYYMMDD');
        resBody.data.AGENTID = agentId;
        resBody.data.BRANCHNO = this.option.BRANCHNO;
        let response = await request(resBody);
        // console.log('changeMyDate', response);
        // let info = response.BODY;
        console.log(response.BODY)
        if(response.BODY.AGENTINFO.length == 0){
          // response.BODY.AGENTINFO[0].SCHEDULELIST = []
          return resData
        }else{
          resData = response.BODY.AGENTINFO[0].SCHEDULELIST
        }
        return resData
      },
      async changeMyDate() {
        this.mySchedules = []
        this.info.mySchedule = ''
        // 选择时间获取自己班次
        // let resBody = new formalClass();
        // resBody.data.QUREYSRTDATE = moment(this.info.myDate).format('YYYYMMDD');
        // resBody.data.QUREYENDDATE = moment(this.info.myDate).format('YYYYMMDD');
        // resBody.data.AGENTIDLISTSTR = this.option.AGENTID;
        // resBody.data.BRANCHNO = this.option.BRANCHNO;
        // let response = await request(resBody);
        // // console.log('changeMyDate', response);
        // // let info = response.BODY;
        // this.mySchedules = response.BODY.AGENTINFO[0].SCHEDULELIST
        // this.mySchedules.forEach((item,index) => {
        //   if(item.ACTIVITYCATEG == '02' || item.ACTIVITYCATEG =='03'){
        //     this.mySchedules.splice(index,1)
        //   }
        // });
        this.getClass(this.option.AGENTID,this.info.myDate).then(value => this.mySchedules = value)
      },
      closeDialog(formName) {
        //         this.$nextTick(()=>{
        //    this.$refs[formName].resetFields();
        // })
        // this.$refs[formName].resetFields();
        // this.$refs[formName].clearValidate();
        this.info = {
            otherDate: '',
            otherSchedule: '',
            myDate: '',
            mySchedule: '',
            remark: '',
            lastTime: ''
          },
          this.isShow = false;
      },
    },
  }

</script>
